<template>
  <el-dialog
    :visible.sync="taskCreatedBatchInnerDialogVisible"
    width="40%"
    top="80px"
    style="min-width: 791px"
    :before-close="closeDialogCan"
    @open="open()"
  >
    <span slot="title" class="title">{{ $t("taskDialog.title.time") }}</span>
    <div class="main" style="padding-left: 30px">
      <el-select
        size="small"
        v-model="taskConfigTime.taskType"
        :placeholder="$t('taskDialog.main.select')"
        @change="taskTypeChange"
        style="width: 200px; margin-bottom: 20px"
      >
        <el-option
          v-for="(item, index) in $t('taskDialog.main.options')"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="time">
        <!-- :rules="formDataRules" -->
        <el-form
          :model="taskConfigTime"
          ref="taskConfigTimeRef"
          label-width="0"
          class="demo-ruleForm"
        >
          <!-- 日常任务 -->
          <div
            class="taskTime daily"
            v-show="taskConfigTime.taskType == '日常任务' ? true : false"
          >
            <el-form-item prop="hour">
              <el-input
                size="small"
                v-model="taskConfigTime.hour"
                @blur="addZero"
              ></el-input>
              <span>{{ $t("taskDialog.main.date.h") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-23</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item prop="minute">
              <el-input
                size="small"
                v-model="taskConfigTime.minute"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.m") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-59</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item prop="second">
              <el-input
                size="small"
                v-model="taskConfigTime.second"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.s") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-59</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-date-picker
              v-model="taskConfigTime.dateRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              :start-placeholder="$t('taskDialog.main.date.start')"
              :end-placeholder="$t('taskDialog.main.date.end')"
            >
            </el-date-picker>
          </div>

          <!-- 周任务 -->
          <div
            class="taskTime weekly"
            v-show="taskConfigTime.taskType == '周任务' ? true : false"
          >
            <el-form-item prop="day_of_week">
              <span>{{ $t("taskDialog.main.date.w") }}</span
              ><el-input
                size="small"
                v-model="taskConfigTime.day_of_week"
              ></el-input>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>1-7</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * ? / L #</strong>
              </div>
            </el-form-item>
            <el-form-item prop="hour">
              <el-input
                size="small"
                v-model="taskConfigTime.hour"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.h") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-23</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item prop="minute">
              <el-input
                size="small"
                v-model="taskConfigTime.minute"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.m") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-59</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item prop="second">
              <el-input
                size="small"
                v-model="taskConfigTime.second"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.s") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-59</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-date-picker
              v-model="taskConfigTime.dateRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              :start-placeholder="$t('taskDialog.main.date.start')"
              :end-placeholder="$t('taskDialog.main.date.end')"
            >
            </el-date-picker>
          </div>

          <!-- 月任务 -->
          <div
            class="taskTime mouthly"
            v-show="taskConfigTime.taskType == '月任务' ? true : false"
          >
            <el-form-item prop="day">
              <el-input size="small" v-model="taskConfigTime.day"></el-input
              ><span>{{ $t("taskDialog.main.date.d") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>1-31</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * ? / L W</strong>
              </div>
            </el-form-item>
            <el-form-item prop="hour">
              <el-input
                size="small"
                v-model="taskConfigTime.hour"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.h") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-23</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item prop="minute">
              <el-input
                size="small"
                v-model="taskConfigTime.minute"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.m") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-59</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item prop="second">
              <el-input
                size="small"
                v-model="taskConfigTime.second"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.s") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-59</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-date-picker
              v-model="taskConfigTime.dateRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              :start-placeholder="$t('taskDialog.main.date.start')"
              :end-placeholder="$t('taskDialog.main.date.end')"
            >
            </el-date-picker>
          </div>

          <!-- 定时/计划任务 -->
          <div
            class="taskTime plan"
            v-show="taskConfigTime.taskType == '定时/计划任务' ? true : false"
          >
            <el-form-item>
              <el-input size="small" v-model="taskConfigTime.year"></el-input
              ><span>{{ $t("taskDialog.main.date.y") }}</span>
              <div>
                {{
                  $t("taskDialog.main.value")
                }}：<strong>1970-2099</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item>
              <el-input size="small" v-model="taskConfigTime.month"></el-input
              ><span>{{ $t("taskDialog.main.date.M") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>1-12</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item>
              <span> {{ $t("taskDialog.main.date.txt") }} </span>
              <el-input size="small" v-model="taskConfigTime.week"></el-input
              ><span>{{ $t("taskDialog.main.date.w") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>1-6</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item>
              <span> {{ $t("taskDialog.main.date.w") }}</span>
              <el-input
                size="small"
                v-model="taskConfigTime.day_of_week"
              ></el-input>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>1-7</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * ? / L #</strong>
              </div>
            </el-form-item>
            <el-form-item>
              <el-input size="small" v-model="taskConfigTime.day"></el-input
              ><span>{{ $t("taskDialog.main.date.d") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>1-31</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * ? / L W</strong>
              </div>
            </el-form-item>
            <el-form-item prop="hour">
              <el-input
                size="small"
                v-model="taskConfigTime.hour"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.h") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-23</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item prop="minute">
              <el-input
                size="small"
                v-model="taskConfigTime.minute"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.m") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-59</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-form-item prop="second">
              <el-input
                size="small"
                v-model="taskConfigTime.second"
                @blur="addZero"
              ></el-input
              ><span>{{ $t("taskDialog.main.date.s") }}</span>
              <div>
                {{ $t("taskDialog.main.value") }}：<strong>0-59</strong>，{{
                  $t("taskDialog.main.card")
                }}：<strong>, - * /</strong>
              </div>
            </el-form-item>
            <el-date-picker
              v-model="taskConfigTime.dateRange"
              value-format="yyyy-MM-dd"
              type="daterange"
              :start-placeholder="$t('taskDialog.main.date.start')"
              :end-placeholder="$t('taskDialog.main.date.end')"
            >
            </el-date-picker>
          </div>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialogCan">{{
        $t("taskDialog.btn.cancel")
      }}</el-button>
      <el-button type="primary" @click="saveTime">{{
        $t("taskDialog.btn.save")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["taskCreatedBatchInnerDialogVisible", "taskRow"],
  data() {
    return {
      // 配置时间的数据
      taskConfigTime: {
        taskType: "日常任务", // 任务类型
        year: "", // 年
        month: "", //月
        day: "", // 日
        hour: "", // 时
        minute: "", // 分
        second: "", // 秒
        week: "", // 周
        day_of_week: "", // 每周几
        dateRange: "", // 开始时间和结束时间
      },
      // 修改配置时间参数表单
      editTimeForm: {},
    };
  },
  methods: {
    // 打开对话框
    open() {
      // 打开对话框 首先数据要还原
      this.taskConfigTime = {
        taskType: "日常任务", // 任务类型
        year: "", // 年
        month: "", //月
        day: "", // 日
        hour: "", // 时
        minute: "", // 分
        second: "", // 秒
        week: "", // 周
        day_of_week: "", // 每周几
        dateRange: "", // 开始时间和结束时间
      };
      console.log(typeof this.taskRow.configuration);
      if (this.taskRow.configuration) {
        this.taskConfigTime = JSON.parse(this.taskRow.configuration);
      }
    },
    // 更换任务类型时触发
    taskTypeChange(val) {
      console.log(val);
    },
    // 小于10的数数字前面加0
    addZero(e) {
      if (e.target.value < 10 && e.target.value.length == 1) {
        e.target.value = "0" + e.target.value;
      }
    },
    // 保存配置时触发
    saveTime() {
      this.editTimeForm.id = this.taskRow.id;
      this.editTimeForm.configuration = JSON.stringify(this.taskConfigTime);
      this.$http.post("/task/time/edit", this.editTimeForm).then((res) => {
        if (res.data.code != 0)
          return this.$message.error(this.$t("taskDialog.message.error"));
        this.$message.success(this.$t("taskDialog.message.success"));
      });
      this.closeDialog();
    },
    // 关闭对话框
    closeDialog() {
      this.$emit("closeDialog");
    },
    closeDialogCan() {
      this.$emit("closeDialog", "1");
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  font-weight: 700;
  color: #606266;
}
.main {
  padding-left: 10px;
  // display: flex;
  .taskTime {
    // display: flex;
    // padding-left: 10px;
    min-width: 620px;
    .el-form-item {
      .el-input {
        width: 150px;
        margin: 0 10px 0 10px;
      }
      div {
        display: inline-block;
        margin-left: 20px;
        strong {
          color: #ff4d4d;
        }
      }
    }

    span {
      // font-size: 16px;
      font-weight: 700;
    }
  }
}
</style>